<template>
	<view>
		<view class="pagess" >
		<uNavbar title="" bgColor="transparent" leftIconColor="#ffffff" ></uNavbar>
			<view class="mask"></view>
			<view class="play_box flex_ld" v-for="(item,index) in gameDescription" :key="item.id">
				<view class="flex_Z">
					<text class="paly_txt">{{item.title}}</text>
					<rich-text class="explain" :nodes="item.information"></rich-text>
				</view>
				<image :src="item.cover" mode="scaleToFill"></image>
			</view>
			<view class="blank" @click="goChooseCar">
				<text>点击空白处关闭</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {gameDescription} from "../../api/mycar.js";
	export default {
		data() {
			return {
				gameDescription:{},
				titleStyle:{
					color:'#ffffff'
				},
			}
		},
		onLoad() {
			this.initDetail()
		},
		methods: {
			// 玩法介绍
			initDetail() {
				gameDescription().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.gameDescription = res.data
					}
				})
			},
			goChooseCar(){
				uni.navigateTo({
					url:'/pagesMy/nationalCarPooling/chooseCar'
				})
			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
	
	.pagess {
		width: 100%;
		height: 100vh;
		background: #10191F;
	}
	.back {
		position: fixed;
		top: 30rpx;
		/* #ifdef APP */
		top: 60rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}
	
	.back>text {
		font-size: 36rpx;
		color: #333333;
	}
	
	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}
	.mask{
		width: 100%;
		height: 140rpx;
	}
	.play_box{
		width: 690rpx;
		height: 214rpx;
		margin: 26rpx auto 0;
		padding: 0 40rpx;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
	}
	.play_box>image{
		width: 138rpx;
		height: 138rpx;
	}
	.paly_txt{
		font-size: 44rpx;
		color: #ffffff;
		margin-bottom: 10rpx;
		font-family: iconfont2;
	}
	.blank{
		display: flex;
		justify-content: center;
		width: 100%;
		height: 500rpx;
		height: calc(100vh - 650px);
		/* background: pink; */
	}
	.blank>text{
		margin-top: 80rpx;
		font-size: 30rpx;
		color: rgba(225,225,225,0.6);
	}
	.explain{
		font-size: 28rpx;
		color: #ffffff !important;
	}
	
	
	
</style>